<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* vue-iclient (https://github.com/SuperMap/vue-iclient)
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-10/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_componentsLayerManager_vue"></title>
        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
        <script
            include="iclient-mapboxgl-vue,mapbox-gl-enhance"
            src="../../dist/mapboxgl/include-mapboxgl.js"
        ></script>
        <style>
            #main {
                margin: 0 auto;
                width: 100%;
                height: 100%;
            }
            .sm-component-layer-manager .sm-component-tree {
                font-size: 12px;
            }
        </style>
    </head>

    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
        <div id="main">
            <sm-web-map :map-options="mapOptions">
                <!-- 图层管理组件：sm-layer-manager -->
                <sm-layer-manager
                    position="top-left"
                    :collapsed="false"
                    :layers="layers"
                    :default-expand-all="true"
                ></sm-layer-manager>
            </sm-web-map>
        </div>
        <script>
            new Vue({
                el: '#main',
                data() {
                    var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
                    var attribution =
                        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
                        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
                        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
                    return {
                        layers: [
                            {
                                title: '直辖市',
                                children: [
                                    {
                                        title: '上海',
                                        mapInfo: {
                                            serverUrl: 'https://www.supermapol.com/',
                                            mapId: 394538195,
                                            layerFilter: function(layer) {
                                                if (layer.name === '上海_县级行政区划图@公众数据') {
                                                    return true;
                                                }
                                                return false;
                                            }
                                        }
                                    },
                                    {
                                        title: '天津',
                                        mapInfo: {
                                            serverUrl: 'https://www.supermapol.com/',
                                            mapId: 849848633,
                                            layerFilter: function(layer) {
                                                if (layer.name === '天津_县级行政区划图@公众数据') {
                                                    return true;
                                                }
                                                return false;
                                            }
                                        }
                                    },
                                    {
                                        title: '北京',
                                        mapInfo: {
                                            serverUrl: 'https://www.supermapol.com/',
                                            mapId: 1837435007,
                                            layerFilter: function(layer) {
                                                if (layer.name === '北京_县级行政区划图@公众数据') {
                                                    return true;
                                                }
                                                return false;
                                            }
                                        }
                                    },
                                    {
                                        title: '重庆',
                                        mapInfo: {
                                            serverUrl: 'https://www.supermapol.com/',
                                            mapId: 1589273415,
                                            layerFilter: function(layer) {
                                                if (layer.name === '重庆_县级行政区划图@公众数据') {
                                                    return true;
                                                }
                                                return false;
                                            }
                                        }
                                    }
                                ]
                            }
                        ],
                        mapOptions: {
                            container: 'map', // container id
                            style: {
                                version: 8,
                                sources: {
                                    'raster-tiles': {
                                        attribution: attribution,
                                        type: 'raster',
                                        tiles: [host + '/iserver/services/map-china/rest/maps/ChinaDark'],
                                        rasterSource: 'iserver',
                                        tileSize: 256
                                    }
                                },
                                layers: [
                                    {
                                        id: 'simple-tiles',
                                        type: 'raster',
                                        source: 'raster-tiles',
                                        minzoom: 0,
                                        maxzoom: 22
                                    }
                                ]
                            },
                            center: [113.91814841850453, 34.946821449424775], // starting position
                            zoom: 5.39 // starting zoom
                        }
                    };
                }
            });
        </script>
    </body>
</html>
